<?php
$page = $this->uri->segment(1);

$ci = &get_instance();
$ci->load->model("city");
$cities = $ci->city->getAllRecords();
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><? echo isset($titulo) ? $titulo.  " - " : "" ?>EXPOCARRERAS</title>
        <meta title="description" content="<? echo isset($descripcion) ? $descripcion : "" ?>" />
        <!-- CSS FILES -->		
        <!-- incluyo el css de colorbox -->
        <link rel="stylesheet" href="<?= base_url() ?>public/css/colorbox.css" />		
        <link rel="shortcut icon" type="image/x-icon" href="<?= base_url() ?>/public/img/favicon.ico">
        <link rel="stylesheet" href="<?= base_url() ?>public/css/jquery-ui-1.8.20.custom.css" />
        <link rel="stylesheet" href="<?= base_url() ?>public/css/bootstrap.css" />
        <link rel="stylesheet" href="<?= base_url() ?>public/css/normalize.css" />
        <link rel="stylesheet" href="<?= base_url() ?>public/css/base.css" />

        <link rel="stylesheet" href="<?= base_url() ?>public/css/jquery.tagit.css" />

        <!-- JS FILES -->		
        <script src="<?= base_url() ?>public/js/jquery.min.js"></script>
        <script src="<?= base_url() ?>public/js/jquery-ui.js"></script>
        <script src="<?= base_url() ?>public/js/jquery.quick.pagination.min.js"></script>
        <script src="<?= base_url() ?>public/js/tag-it.js"></script>
        <script src="<?= base_url() ?>public/js/jquery.maskedinput.min.js"></script>
        <script src="<?= base_url() ?>public/js/jquery.form.js"></script>
        <script src="<?= base_url() ?>public/js/gmaps.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

        <link rel="shortcut icon" href="<?= base_url() ?>public/img/favicon.ico" />
        <!--incluyo el js de colorbox -->
        <script src="<?= base_url() ?>public/js/jquery.colorbox.js"></script>
        <script src="<?= base_url() ?>public/js/cycle/jquery.cycle.all.min.js"></script>
        <script src="<?= base_url() ?>public/js/jflickrfeed.js"></script>
        <script src="<?= base_url() ?>public/js/setup.js"></script>

        <style>
            img {
                max-width: none;
            }
            .btn-siguiente {
                color: #FFFFFF;
                alignment-adjust: central;
                text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
                background-color: #FFA500;
                background-image: -moz-linear-gradient(top, #FDC856, #FFA500);
                background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FDC856), to(#FFA500));
                background-image: -webkit-linear-gradient(top, #FDC856, #FFA500);
                background-image: -o-linear-gradient(top, #FDC856, #FFA500);
                background-image: linear-gradient(top, #FDC856, #FFA500 68%);
                background-repeat: repeat-x;
                border-color: #FFA500;
                border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FDC856', endColorstr='#FFA500', GradientType=0);
                filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            }
            .btn-siguiente:hover,
            .btn-siguiente:active,
            .btn-siguiente.active,
            .btn-siguiente.disabled,
            .btn-siguiente[disabled] {
                color: #FFFFFF;
                background-color: #FFA500;
            }
            .user-account-box {
margin-top: 20px;
margin-bottom: 5px;
}
            .container.menu {
margin-top: 2px;
}
.fancybox-custom{
    width:40% !important;
    
}

.fancybox-custom-ingresar{
    width:30% !important;
   
    
}
.fancybox-inner{
    width: 100% !important;
  
}


        </style>

        <!--<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>-->
        <script>
            //* hide all elements & show preloader
            document.documentElement.className += 'js';
        </script>
        <script>
            $(function() {
                //Mensaje del Formulario de Publiacion de Cursos
            $("#dialog-modal").dialog({
                height: 140,
                modal: true,
                autoOpen: false
            });
                //Palabras claves de publicacion de curso
                var sampleTags = ['diseño', 'diseño web', 'php', 'diseño digital', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua', 'cocina'];

                //-------------------------------
                // Minimal
                //-------------------------------
                $('#myTags').tagit();

                //-------------------------------
                // Single field
                //-------------------------------
                $('#singleFieldTags').tagit({
                    availableTags: sampleTags,
                    // This will make Tag-it submit a single form value, as a comma-delimited field.
                    singleField: true,
                    singleFieldNode: $('#mySingleField'),allowSpaces:true
                });

            });
        </script>
        <link rel="stylesheet" href="<?=base_url('public/fancy/source/jquery.fancybox.css')?>"/>
        <script type="text/javascript" src="<?=base_url('public/fancy/source/jquery.fancybox.js')?>"></script>
        <!-- aca incluyo todo el script que esta en el ejemplo(solo usamos inline) -->
        <script>
            $(document).ready(function() {


                 $('#fan-registrate').on('click',function(){
                      $.ajax({
            url:'<?=base_url("sessions/frm_resgistrar")?>',
            
            cache:false,
            type:'POST',
            success:function(respuesta){
               
                 $.fancybox.open(respuesta,{
                    scrolling:'no',
                    maxHeight :1000,
                    maxWidth: 1000,
                    width :'100%',//puede estar en auto tambien
                    height:'100%',
                    padding:10,
                    background:'black',
                    autoResize :true,
                    wrapCSS:'fancybox-custom'

            });
            }
            
        });
           return false;          
                     
                     
                 });    

                     
                   $("#output").click(function() {
                           $("#ImageFile").click();
                   });
                   $("#ImageFile").change(function() {
                       $("#UploadForm").submit();
                      });
                   
                                       //elements
                    var progressbox     = $('#progressbox');
                    var progressbar     = $('#loadImg');
                    var statustxt       = $('#statustxt');
                    var submitbutton    = $("#SubmitButton");
                    var myform      = $("#UploadForm");
                    var output      = $("#output");
                    var completed       = '0%';

                            $(myform).ajaxForm({
                                beforeSend: function() { //brfore sending form
                                    $("#output").html("");
                                    progressbar.show();
                                    submitbutton.attr('disabled', ''); // disable upload button
                                 
                                },
                        
                                complete: function(response) { // on complete
                                    output.html(response.responseText); //update element with received data
                                    myform.resetForm();  // reset form
                                    submitbutton.removeAttr('disabled'); //enable submit button
                                    progressbar.hide(); // hide progressbar
                                }
                        });
                
                //Examples of how to assign the Colorbox event to elements
                $(".group1").colorbox({rel: 'group1'});
                $(".group2").colorbox({rel: 'group2', transition: "fade"});
                $(".group3").colorbox({rel: 'group3', transition: "none", width: "75%", height: "75%"});
                $(".group4").colorbox({rel: 'group4', slideshow: true});
                $(".ajax").colorbox();
                $(".youtube").colorbox({iframe: true, innerWidth: 640, innerHeight: 390});
                $(".vimeo").colorbox({iframe: true, innerWidth: 500, innerHeight: 409});
                $(".iframe").colorbox({iframe: true, width: "80%", height: "80%"});
                $(".inline").colorbox({inline: true, width: "45%", height: "65%",    onOpen: function() {
                 $('#form_contacto').show();
            } ,  onClosed: function() {
                
                
            },
        
    
    } );
             
                $(".inline3").colorbox({inline: true, width: "80%", height: "70%"});
                $(".inline4").colorbox({inline: true, width: "30%", height: "30%"});
                $(".inline5").colorbox({inline: true, width: "50%", height: "75%"});
                $(".callbacks").colorbox({
                    onOpen: function() {
                        alert('onOpen: colorbox is about to open');
                    },
                    onLoad: function() {
                        alert('onLoad: colorbox has started to load the targeted content');
                    },
                    onComplete: function() {
                        alert('onComplete: colorbox has displayed the loaded content');
                    },
                    onCleanup: function() {
                        alert('onCleanup: colorbox has begun the close process');
                    },
                    onClosed: function() {
                        alert('onClosed: colorbox has completely closed');
                    }
                });

                $('.non-retina').colorbox({rel: 'group5', transition: 'none'})
                $('.retina').colorbox({rel: 'group5', transition: 'none', retinaImage: true, retinaUrl: true});

                //Example of preserving a JavaScript event for inline calls.
                $("#click").click(function() {
                    $('#click').css({"background-color": "#f00", "color": "#fff", "cursor": "inherit"}).text("Open this window again and this message will still be here.");
                    return false;
                });
            });
        </script>
    </head>
    <body>
       
        <div class="row-fluid header-menu">
            <div class="container header">
                <div class="row-fluid">
                    <div class="span5 logo">
                        <a href="<?= base_url() ?>"><img src="<?= base_url() ?>public/img/logo.png"></a>
                    </div>
                    <div class="span4 offset3">
                        <div class="user-account-box">
                            <?php
                            if ($this->session->userdata('user_id')) {
                                ?>
                                <a class='login naranja' href="<?php echo base_url(); ?>profile/view/<?php echo $this->session->userdata('user_id') ?>"><?php echo $this->session->userdata('data')->email; ?></a>
                                <?php
                            } else {
                                ?>
                                <!-- Aca llama con la clase "inline" a que abra el colorbox y que tome el codigo de #inline_content -->
                                <a class='inline login naranja' href="#login">INGRESA</a>
                                <?php
                            }
                            ?>

                            <?php
                            if ($this->session->userdata('user_id')) {
                                ?>
                                <a class='registration naranja' href="<?= base_url() ?>sessions/user_logout">Salir</a>
                                <?php
                            } else {
                                ?>
                                <a class='registration naranja' href="<?= base_url("sessions/frm_resgistrar") ?>" id="fan-registrate">REGISTRATE</a>
                                <?php
                            }
                            ?>

                        </div>
                    </div>
                    <div class="city-box">
                        <span style="color: white; margin-left: -56px; font-size:12px">CIUDAD</span>
                        <? $attributes = array('class' => 'frm_city', 'id' => 'frm_city');
                        echo form_open(base_url(),$attributes); ?>    
                        <select id="selectCity" name="selectCity">
                            <?php
                            foreach ($cities as $row) {?>
                               <option value="<? echo   $row->id ?>" <? echo $this->session->userdata('city')==  $row->id  ? "selected" : ""  ?> ><? echo  $row->name ?> </option>
                           <? }
                            ?>
                        </select>
                          </form>
                                <script>
                                  $("#selectCity").change(function(){
                                  
                                     $("#frm_city").submit();
                                  });
                              </script>
                    </div>
                    
                </div>
            </div>

            <div class="container menu">
                <div class="row-fluid">
                    <div class="span7 offset5" style="width: 70%;
float: right;">
                        <ul>
                            <li><a href="<?= site_url() ?>">Home</a></li>
                            <li><a href="<?= site_url('courses/recomendados') ?>">Cursos Recomendados</a></li>
                            <li><a href="<?= site_url('courses/proximos') ?>">Próximos a Comenzar</a></li>
                            <li><a href="<?= site_url('instituciones') ?>">Instituciones</a></li>
                            <li class="latest"><a href="<?= site_url('registro/tu_curso') ?>">Publicá tu curso</a></li>
                        </ul>
                    </div>
                </div>
            </div>  
        </div>

  

    <!-- Error de login -->
    <div style='display:none;'>
        <div id='error-login' style='padding-left:20px; background:#fff;overflow:hidden !important;'>        
            <h5 style="color:red">Usuario o clave incorrecto</h5>
            <a class="inline4" href="#error-login" id="showErrorLogin"></a>
        </div>
    </div>

    <!-- Usuario Registrado OK -->
    <div style='display:none;'>
        <div id='registro-ok' style='padding-left:20px; background:#fff;overflow:hidden !important;'>        
            <h5 style="color:orange">Usuario registrado con exito</h5>
            <a class="inline4" href="#registro-ok" id="showRegistroOK"></a>
        </div>
    </div>

    <!-- Curso Publicado -->
    <div style='display:none;'>
        <div id='curso-publicado' style='padding:20px; background:#fff;overflow:hidden !important;'>        
            <?php
            if (!isset($error_publica_curso)) {
                ?>    
                <h5 style="color:#FFA563"> Felicidades! <?php echo $titulo_curso ?> ha sido publicado satisfactoriamente!.
                    Tenga en cuenta que su curso no se vera publicado hasta ser aprobado por Expocarreras puede ver la publicacion de su curso aqui
                    <a href=""></a>
                
                </h5>
                <?php
            } else {
                ?>    
                <h5 style="color:blue">Error al publicar curso</h5>
                <?php
            }
            ?>                
            <a class="inline4" href="#curso-publicado" id="showCursoPublicado"></a>
        </div>
    </div>
    <!-- Curso Publicado -->
    <div style='display:none;'>
        <div id='news-guardado' style='padding:20px; background:#fff;overflow:hidden !important;'>        
            <h4>Email registrado correctamente</h4>      
            <a class="inline4" href="#news-guardado" id="newsguardado"></a>
        </div>
    </div>
    
    <!-- Aca empieza el div oculto que colorbox deberia abrir (inline del ejemploque te mande por mail) -->

    <div style='display:none;'>
        <div id='login' style='padding-left:20px; background:#fff;overflow:hidden !important;'>
            <form action="<?= base_url() ?>sessions/user_login" method="post">
                <h2 style="color:#FFA563; margin-bottom:0px;"> Accede a los mejores estudios </h2>  
                Solo será necesario establecer tu email y contraseña como usuario
                <div style='margin-left:20%;'>
                    <br>* Email<br> <input style="border-radius:6px; width:60%;"type="text" name="email">
                    <br>* Contraseña<br> <input style="border-radius:6px; width:60%;"type="password" name="password"><br>
                    <br>
                    <div style="float:left;width:40%; color:gray;line-height:15px;">Recuperar tu contraseña?<br>Click   <a style="color:#FFA563;" href="#">Aquí</a>
                    </div>
                    <div style="float:right;width:55%">
                        <input type="submit" class="btn btn-siguiente" name="btn_login" style="font-weight:bold;" value="Ingresar" >
                    </div>
                </div>
            </form>
        </div>
    </div>
